#{extends 'layout.html' /}
#{set title:messages.get('manualObjectives.list.title') /}

#{script 'jquery-ui-1.8.21.custom.min.js'/}
#{script 'jquery.ui.datepicker.js'/}
#{script 'jquery.ui.datepicker-es.js'/}
#{script 'datepicker.js'/}
#{script 'graficos/jquery.flot.js'/}
#{script 'list_objetivos_manuales.js'/}

<!-- TODO: Nico, no pude sacarlo a un js distinto por la key de facebook -->
<script src='http://connect.facebook.net/en_US/all.js'></script>

<script> 
	FB.init({appId:${play.configuration.getProperty("securesocial.facebook.clientid")}, status: true, cookie: true});
	
	function postToFeed() {
		
		// calling the API ...
		var obj = {
			method: 'feed',
			// picture: "http://adieta.jymsoft.cloudbees.net/public/images/logo.png",
		};
		
		function callback(response) {
			// necesario por la api, devuelve el id del post... pero no hacemos nada
		}
		
		FB.ui(obj, callback);
	}
</script>
<!-- TODO: Nico, no pude sacarlo a un js distinto por la key de facebook -->

<div id="crudList" class="${type.name}">
	
	<h2 id="crudListTitle">${title}</h2>
 
 #{if totalCount <= 0}
		<div class="crudFlash flashError">
			&{'manualObjectives.list.empty'}
		</div>
	#{/if}

	#{if totalCount > 0}
	<div id="crudListTable">
		#{crud.table fields:['nombreObjetivoManual', 'pesoActualObjetivoManual', 'pesoDeseadoObjetivoManual', 'fechaLimiteObjetivoManual', 'estadisticas', 'Compartir Progreso']
					, sort: ['nombreObjetivoManual', 'pesoActualObjetivoManual', 'pesoDeseadoObjetivoManual', 'fechaLimiteObjetivoManual']}
		
			#{crud.custom 'fechaLimiteObjetivoManual'}
					${object.fechaLimiteObjetivoManual.format('dd/MM/yyyy')}
			#{/crud.custom}
			
			#{crud.custom 'estadisticas'}
				<div class="contenedor_funciones">
					<a href="#"><img class="funciones" alt="&{'estadisticas'}" src="/public/images/icons/funciones/grafico_barras.png" title="&{'estadisticas'}"
									onclick="verEstadisticas(${object.id}, '${object.fechaInicio.format('dd/MM/yyyy')}', '${object.fechaLimiteObjetivoManual.format('dd/MM/yyyy')}', ${object.pesoActualObjetivoManual}, ${object.pesoDeseadoObjetivoManual});" /></a>
				</div>
			#{/crud.custom}
			
			#{crud.custom 'Compartir Progreso'}
				<div class="contenedor_funciones">
					<a href="#"><img class="funciones" alt="Compartir Progreso" src="/public/images/icons/funciones/facebook32.png" title="Compartir Progreso"
									onclick="postToFeed(); return false;" /></a>
				</div>
			#{/crud.custom}
		#{/crud.table}
	</div>
	#{/if}
	
		<div id="crudListAdd" class="btn">
		<a href="@{ManualObjectives.newManualObjective(userId)}">
			&{'manualObjectives.crearObjetivo'}
		</a>
	</div>
	<div id="crudListAdd" class="btn">
		<a id="cargaDeDatosId" href="/paciente/registroPesos" style="position: absolute; right: 125px;">
			&{'manualObjectives.registrarPeso'}
		</a>
	</div>
 
</div>

<div id="estadisticas" style="display: none;">
    <div id="burndownChart" style="width: 550px; height: 350px;"></div>
    <div id="burndownChart_data"></div>
    
    <div style="margin-left: 40px">
		<div class="crudField crud_date">
			<label for="fechaInicio" style="width: 70%">
				&{'plan.fechaInicio'}
			</label>
			<input id="fechaInicio" type="text" size="10" readonly="readonly" style="background-color: grey;" />
		</div>
		
		<div class="crudField crud_date">
			<label for="fechaFin" style="width: 70%">
				&{'plan.fechaFin'}
			</label>
			<input id="fechaFin" type="text" size="10" readonly="readonly" style="background-color: grey;" />
		</div>
    </div>
</div>